<!--
 * @Author: t-xiangqun.li t-xiangqun.li@pcitc.com
 * @Date: 2025-10-20 10:14:02
 * @LastEditors: t-xiangqun.li t-xiangqun.li@pcitc.com
 * @LastEditTime: 2025-10-22 19:28:31
 * @FilePath: \electron-ai\src\components\ProviderSelect.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="provider-select w-full">
    <SelectRoot v-model="currentProvider">
      <SelectTrigger
        class="flex w-full items-center justify-between rounded-md px-3 py-1.5 shadow-sm border outline-none data-[placeholder]:text-gray-400"
        aria-label="Customise options"
      >
        <SelectValue placeholder="Select a model..." />
        <i class="icon">↓</i>
      </SelectTrigger>
      <SelectPortal>
        <SelectContent
          class="bg-white rounded-md shadow-md z-[100] border"
          :side-offset="5"
        >
          <SelectViewport class="p-2">
            <div v-for="provider in items" :key="provider.id">
              <SelectLabel class="flex items-center px-6 h-7 text-gray-500">
                <img
                  :src="provider.avatar"
                  :alt="provider.name"
                  class="h-5 w-5 mr-2 rounded"
                />
                {{ provider.name }}
              </SelectLabel>
              <SelectGroup>
                <SelectItem
                  v-for="model in provider.models"
                  :key="model"
                  :value="`${provider.id}/${model}`"
                  class="relative outline-none rounded flex items-center h-7 px-6 cursor-pointer text-green-700 data-[highlighted]:bg-green-700 data-[highlighted]:text-white"
                >
                  <SelectItemIndicator class="absolute left-2 w-6">
                    <i>√</i>
                  </SelectItemIndicator>
                  <SelectItemText>{{ model }}</SelectItemText>
                </SelectItem>
              </SelectGroup>
              <SelectSeparator class="h-[1px] bg-gray-300 my-2" />
            </div>
          </SelectViewport>
        </SelectContent>
      </SelectPortal>
    </SelectRoot>
  </div>
</template>

<script lang="ts" setup>
import { ProviderProps } from "src/types";
import { ref } from "vue";
import {
  SelectRoot,
  SelectTrigger,
  SelectValue,
  SelectPortal,
  SelectContent,
  SelectViewport,
  SelectItem,
  SelectItemIndicator,
  SelectItemText,
  SelectLabel,
  SelectGroup,
  SelectSeparator,
} from "radix-vue";

const currentProvider = defineModel<string>();
defineProps<{ items: ProviderProps[] }>();
</script>
